<template>
  <div class="agentShop_setting">
    <c-title :hide="false" :text="'推客店铺设置'"></c-title>
    <div class="tips">店铺设置</div>
    <div class="setBox">
      <van-cell-group>
        <van-cell value-class="other_right" title-style="flex:8.5rem 0;">
          <template #title>
            <div class="cellLeft">头像</div>
          </template>
          <template #default>
            <div class="image">
              <img :src="infoData.avatar_image" alt="" />
              <div class="posUpload">
                <van-uploader :after-read="afterRead" />
              </div>
            </div>
            <van-icon name="arrow" />
          </template>
        </van-cell>
        <van-cell title-style="flex:5.5rem 0;">
          <template #title>
            <div class="cellLeft">店铺名称</div>
          </template>
          <template #default>
            <input class="inpStyle" v-model="infoData.shop_name" type="text" placeholder="店铺名称" />
          </template>
        </van-cell>
        <van-cell title="店铺介绍" title-class="cellLeft" value-class="other_left" title-style="flex:5.5rem 0;">
          <template #default>
            <van-field rows="2" v-model="infoData.shop_desc" autosize type="textarea" maxlength="20" placeholder="请输入店铺介绍" show-word-limit />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="saveBtn set-pc-style">
      <div class="btn" @click="save">保存</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      infoData: [],
      avatar: ""
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    async getData() {
      let { data, msg, result } = await $http.post("plugin.agent-shop.frontend.agent.manage", {}, "");
      if (!result) return this.$toast(msg);
      this.infoData = data;
    },
    async save() {
      let { data, msg, result } = await $http.post(
        "plugin.agent-shop.frontend.agent.edit",
        {
          avatar: this.avatar,
          shop_name: this.infoData.shop_name,
          shop_desc: this.infoData.shop_desc
        },
        ""
      );
      if (!result) return this.$toast(msg);
      this.$toast(msg);
    },
    afterRead(e) {
      this.$toast.loading({
        message: "上传中",
        forbidClick: true
      });
      let fd = new FormData();
      fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      this.uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
      axios
        .post(this.uploadUrl, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          this.avatar = response.data.data.img;
          this.infoData.avatar_image = response.data.data.img_url;
          this.$toast.clear();
        })
        .catch(error => {
          this.$toast.clear();
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.agentShop_setting {
  padding: 1rem 0.75rem;
  box-sizing: border-box;
  .saveBtn {
    width: 100%;
    padding: 0.78rem 0.75rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    .btn {
      background: #f15353;
      border-radius: 1.88rem;
      width: 100%;
      color: #fff;
      padding: 0.78rem 0;
    }
  }
  .tips {
    font-weight: bold;
    font-size: 0.94rem;
    text-align: left;
  }
  .setBox {
    margin-top: 0.81rem;
    border-radius: 0.5rem;
    .inpStyle {
      border: none;
      width: 90%;
    }
    .other_right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .imgUpload {
        text-align: right;
        width: 2rem;
        height: 2rem;
        background: #d6d6dc;
        border-radius: 50%;
        margin-right: 0.6rem;
      }
    }
    .image {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background: #d6d6dc;
      margin-right: 0.66rem;
      position: relative;
      .posUpload {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 9;
      }
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .cellLeft {
      text-align: left;
    }
  }
}
.other_left {
  .van-cell {
    padding: 0 16px;
  }
}
</style>
